<template>
  <div class="html-body">
    <div class="content-page">
      <div v-for="item in medicineList" :key="item.id">
        <div class="item-container">
          <div class="title">
            <p v-if="item.skuId == 1" href="" @click="detailInfoTranditionlMedincine(item.id)">
              <a href="">{{ item.name }}</a>
            </p>
            <p v-if="item.skuId == 2" href="" @click="detailInfoChineseMedincine(item.id)">{{ item.name }}</p>
            <p v-if="item.skuId == 3" href="" @click="detailInfoMedincine(item.id)">{{ item.componentName }}</p>
          </div>
          <div class="content">
            <p v-if="item.skuId == 1"  @click="detailInfoTranditionlMedincine(item.id)">
              <a v-if="lighlightFields(item.id) !== ''" v-html="lighlightFields(item.id)"></a>
              <a v-else>{{item.category}}</a>
              {{item.clinicalApplication}}
            </p>
            <p v-else-if="item.skuId == 2" @click="detailInfoChineseMedincine(item.id)">
              <a v-if="lighlightFields(item.id) !== ''" v-html="lighlightFields(item.id)"></a>
              <a v-else>{{item.adverseReaction}}</a>
            </p>
            <p v-else-if="item.skuId == 3" @click="detailInfoMedincine(item.id)">{{item.mainEffect}}</p>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
import request from '@/api/request'

export default {
  data () {
    return {
      loading: false,
      dataInfo: [],
      page: {
        total: 7,
        currentPage: 1,
        pageSize: 1,
        queryString: ''
      },
      highlight: [],
      medicineList: {}
    }
  },
  mounted () {
    this.searchMedicine()
  },
  created () {
  },
  computed: {
  },
  methods: {
    // 详情页
    detailInfoTranditionlMedincine (id) {
      this.$router.push({
        name: 'traditionalChineseMedicineDetails',
        params: {
          id: id
        }
      })
    },
    detailInfoChineseMedincine (id) {
      this.$router.push({
        name: 'proprietaryChineseMedicinesDeatils',
        params: {
          id: id
        }
      })
    },
    detailInfoMedincine (id) {
      this.$router.push({
        name: 'westernMedicineThemeDetails',
        params: {
          id: id
        }
      })
    },
    async searchMedicine () {
      // const queryString = this.page.queryString
      const page = this.page.currentPage
      const size = this.page.pageSize
      try {
        // http://127.0.0.1:8888/search/getInfo/clients/1/2?skuId=&queryString=%E7%BB%93%E8%86%9C%E5%85%85%E8%A1%80%E5%92%8C%E6%B3%8C%E5%B0%BF%E9%81%93%E5%88%BA%E6%BF%80%E7%97%87%E7%8A%B6
        await request.get(`/search/getInfo/clients/${page}/${size}?skuId&queryString=${'中药'}`).then(resp => {
          const data = resp.data
          this.medicine2 = data.data
          this.medicineList = data.data
          // this.highlight = resp.data.highlight
          this.highlight = resp.data.highlight
          this.lighlightFields()
        })
      } catch (error) {
        this.handleAxiosError(error)
      }
    },
    lighlightFields (id) {
      const highlight = this.highlight.find(item => item.id === id)
      if (highlight !== undefined && highlight.content !== undefined) {
        // alert(highlight.content)
        return highlight.content
      } else {
        return ''
      }
    },
    handleSizeChange (pageSize) {
      this.positionPage.pageSize = pageSize
      this.getDataMedicineList()
    },
    handleCurrentChange (currentPage) {
      this.positionPage.currentPage = currentPage
      this.getDataMedicineList()
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        // this.$message.error('网络请求失败，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      } else {
        // 处理其他类型的错误
        // this.$message.error('网络请求失败，发生错误，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
html-body{
  padding: 0;
  margin: 0;
}
.content-page {
  padding-left 200px
  width: 700px;
  .item-container {
    margin-bottom 12px
  }
}
.content p {
  top -32px;
  padding-right: 70px;
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-left: 3px;
  white-space: pre-line;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.title {
  margin-right: 470px;
}
.title p {
  // border-bottom: blue 2px solid;
  text-align: justify;
  color blue
  //margin-right 120px
  word-wrap: break-word;
  overflow-wrap: break-word;
  //display inline-block
}
.title p a:hover {
  color: red; /* 鼠标移入时标题的颜色变为红色 */
  // border-bottom: #FF0000FF 2px solid;
}
</style>
